<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>生鲜商城</title>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/jquery.js"></script>
    <style>
        .time {
            font-size: 13px;
            color: #999;
        }

        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }

        .button {
            padding: 0;
            float: right;
            display: inline-block;
            height: 50px;
            width: 120px;
            background-color: #ED2553;
            color: #ffffff;
            font-size: 18px;
            border-radius: 5px;
        }

        .image {
            width: 100%;
            height: 250px;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
    </style>
</head>
<body>
<el-container id="app">
    <el-header style="height:500px">
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
        >
            <div class="demo-image">
                <div class="block" :key="img.headbg">
                    <el-image
                            style="width: 1920px; height: 440px"
                            :src="img.headbg"
                            :fit="img.headbg">
                    </el-image>
                </div>
            </div>
            <el-menu-item index="11">首页</el-menu-item>
            <el-menu-item index="22">商品</el-menu-item>
            <el-menu-item index="33">限时秒杀</el-menu-item>
            <el-menu-item index="44">领券中心</el-menu-item>
            <el-menu-item index="55">
                <a href="/loginAndRegister" target="_blank" v-if="user.userName=='' "  style="text-decoration: none">登录/注册</a>
                <a href="/myCenter" v-if="user.userName != '' " v-text="user.userName" style="color: #ED2553;text-decoration: none">{{user.userName}}</a>
                <a href="/shoppingCart" v-if="user.userName != '' " class="el-icon-shopping-cart-1"  style="color: #ED2553;text-decoration: none"></a>
            </el-menu-item>
            <el-menu-item index="66">
                <a href="javascript" target="_blank" v-if="user.userName==''"></a>
                <a href="/logout" v-else v-text="logout" style="text-decoration: none">{{logout}}</a>
            </el-menu-item>
        </el-menu>
        <div class="line"></div>
    </el-header>

    <!--领券中心-->
    <el-main style="margin-top: 6px;">

        <el-tabs :tab-position="tabPosition">
            <el-tab-pane :data="direct" label="直接发放">

                <el-col :span="8" style="width:400px;margin-left: 70px; margin-top: 30px;" v-for="item in direct">
                    <el-card :body-style="{ padding: '0px' }">
                        <!--https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3218359211,2016981492&fm=26&gp=0.jpg券-->
                        <!-- https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2293149804,100687870&fm=26&gp=0.jpg折-->
                        <!--https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1325239700,4029398801&fm=26&gp=0.jpg ￥-->
                        <img style="width:85%;margin:0 auto"
                             src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3218359211,2016981492&fm=26&gp=0.jpg"
                             class="image">
                        <div style="padding: 20px;">
                            <span style="font-size: 20px;color: red;font-weight: bold"
                                  v-if="item.couponDiscountsStatus == '直扣'">{{symbolOne}}</span>
                            <span style="font-size: 40px;color: red;font-weight: bold">{{item.couponDiscount}}</span>
                            <span style="font-size: 20px;color: red;font-weight: bold"
                                  v-show="item.couponDiscountsStatus == '折扣'">{{symbolTwo}}</span>
                            <div><span class="time">满</span>
                                <span>{{item.couponThreshold}}</span>
                                <span class="time">元可用</span></div>
                            <div class="bottom clearfix">
                                <time class="time" style="line-height: 50px;font-size: 16px">
                                    {{item.couponName}}
                                </time>
                                <span>券</span>
                                <el-button class="button" @click="directGet(item)" plain>立即领取</el-button>

                            </div>
                        </div>
                    </el-card>
                </el-col>

            </el-tab-pane>

            <!--积分兑换-->
            <el-tab-pane label="积分兑换券">

                <el-col :span="8" style="width:400px;margin-left: 70px; margin-top: 30px;" v-for="item in score">
                    <el-card :body-style="{ padding: '0px' }">
                        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1325239700,4029398801&fm=26&gp=0.jpg"
                             class="image">
                        <div style="padding: 20px;">
                            <span style="font-size: 20px;color: red;font-weight: bold"
                                  v-if="item.couponDiscountsStatus == '直扣'">{{symbolOne}}</span>
                            <span style="font-size: 40px;color: red;font-weight: bold">{{item.couponDiscount}}</span>
                            <span style="font-size: 20px;color: red;font-weight: bold"
                                  v-show="item.couponDiscountsStatus == '折扣'">{{symbolTwo}}</span>

                            <div><span class="time">无门槛券</span></div>
                            <div class="bottom clearfix">
                                <time class="time" style="line-height: 50px;font-size: 16px">{{item.couponName}}</time>
                                <span>积分兑换券</span>
                                <el-button class="button" @click="scoreGet(item)" plain>立即兑换</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>

            </el-tab-pane>


        </el-tabs>

    </el-main>

</el-container>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            activeIndex: "44",
            productType: [],
            img: {
                headbg: '/img/bg/banner3.jpg',
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
            },
            user: {
                userId: '',
                userName: '',
            },
            tabPosition: 'left',
            logout: '退出登录',
            symbolOne: '￥',
            symbolTwo: '折',
            /*直接发放*/
            direct: [],
            couponDirect: {
                couponDiscount: 0,
                couponName: '',
                couponThreshold: 0,
                couponStatusOne: '直接发放',
                couponDiscountsStatusOne: '直扣',
                couponDiscountsStatusTwo: '折扣',
                couponDiscountsStatus: '',
            },
            /*积分兑换券*/
            score: [],
            couponScore: {
                couponScorePrice: 0,
                couponName: '',
                couponStatusThree: '积分兑换',
                couponDiscountsStatusOne: '直扣',
                couponDiscountsStatusTwo: '折扣',
                couponDiscountsStatus: '',
            },
            logout:'退出登录',
        },

        methods: {
            //导航栏
            handleSelect: function (key, keyPath) {
                if(key==11){
                    window.location.href="/"
                }else if(key==22){
                    window.location.href="/toProduct"
                }else if(key==33){
                    window.open("/KillProduct")
                }else if(key==44){
                    window.location.href="/couponCenter"
                }
            },
            //领取直接发放券
            directGet: function (item) {
                var vm = this;
                console.log("当前优惠券的id" + item.couponId);
                //判断用户
                if (vm.user.userId != '') {
                    //新增领取直接发放券
                    var userCoupon = {userId: vm.user.userId, couponId: item.couponId, userCouponNum: 1};
                    $.ajax({
                        url: "/freshmarket/user-coupon/insertDirect",
                        type: "post",
                        data: JSON.stringify(userCoupon),
                        contentType: "application/json;charset=utf-8",
                        success: function (resp) {
                            console.log(resp);
                            if (resp.success) {
                                alert(resp.message);
                            } else {
                                alert(resp.message);
                            }
                        }
                    });
                } else {
                    alert("请先登录！");
                    window.location = "/loginAndRegister";
                }
            },
            //积分兑换优惠券
            scoreGet: function (item) {
                var vm = this;
                console.log("当前优惠券的id" + item.couponId);
                //查询该用户是否登录
                //判断用户
                if (vm.user.userId != '') {
                    //新增兑换积分优惠券
                    var userCoupon = {userId: vm.user.userId, couponId: item.couponId, userCouponNum: 1};
                    $.ajax({
                        url: "/freshmarket/user-coupon/insertScore",
                        type: "post",
                        data: JSON.stringify(userCoupon),
                        contentType: "application/json;charset=utf-8",
                        success: function (resp) {
                            console.log(resp);
                            if (resp.success) {
                                alert(resp.message);
                            } else {
                                alert(resp.message);
                            }
                        }
                    });
                } else {
                    alert("请先登录！");
                    window.location = "/loginAndRegister";
                }

            },

        },
        mounted: function () {
            var vm = this;
            $.ajax({
                url: "/freshmarket/product-type/getList",
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data.success == true) {
                        vm.productType = data.data;
                    } else {
                        console.log(data.message);
                    }
                },
            });
            //登录注册
            $.ajax({
                url: "/freshmarket/user/islogin",
                type: "get",
                success: function (data) {
                    console.log(data);
                    if (data.data) {
                        vm.user = data.data;
                    }

                }
            });
            //查询用户信息
            if (vm.user.userId != '') {

                $.ajax({
                    url:"/freshmarket/user/selectUser",
                    type:"get",
                    data:vm.user,
                    dataType:'json',
                    success:function(data){
                        console.log(data);
                        if(data.data){
                            vm.user = data.data;
                        }

                    }
                });

            }

            //查询直接发放券
            $.ajax({
                url: "/freshmarket/coupon/selectDirect",
                type: "post",
                dataType: "json",
                data: JSON.stringify(vm.couponDirect),
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    console.log(data);
                    vm.direct = data.data;
                }
            });

            //查询积分优惠券
            $.ajax({
                url: "/freshmarket/coupon/selectScore",
                type: "post",
                dataType: "json",
                data: JSON.stringify(vm.couponScore),
                contentType: "application/json;charset=utf-8",
                success: function (data) {
                    console.log(data);
                    vm.score = data.data;
                }
            });


        },


    });
</script>
</body>
</html>
